<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="iamge/标志.png" alt="">
        <span class="title">我的博客系统</span>
        <!-- spacer这个标签仅仅用于占位，把这几个a标签挤到最右边去 -->
        <div class="spacer"></div>
        <!-- 在此用相对路径的写法 -->
        <!-- 这是静态的html -->
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <!-- 这是动态的 servlet 页面 -->
        <a href="logout">注销</a>
    </div>


    <!-- 页面主体部分 -->
    <div class="container">
        <!-- 左侧边信息 -->
        <div class="container-left">
            <!-- 此处引入card类，是为了只是显示用户信息的部分（如背景，若是选container-left ，则背景颜色就是和父级元素一样高了） -->
            <div class="card">
                <img src="iamge/宝儿姐.jpg" alt="">
                <h3>宝儿姐的贴身保镖</h3>
                <a class="link" href="https://www.baidu.com/" target="_blank">github地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>    
            </div>
        </div>
            
        <!-- 右侧边信息 -->
        <div class="container-right">
            
               
        </div>
    </div>
                
              
    <!-- 引入 jquery -->
    <script src="./js/jquery.min.js"></script>

    <script>
        // 在页面进行加载的时候，想向服务器发起请求，获取到博客列表页
        function getBlogs() {
            $.ajax ({
                type:'get',
                url:'blog',
                // 回调函数，也就是服务器接收请求后，返回的响应中的body
                success: function(body) {
                    // 在这个地方构造返回的博客列表页
                    // 相应的正文是一个 json 格式的字符串，此处已经被jquery 自动解析成js 对象数组了
                    // 我们只需要遍历这个数组，拿到里面的数据即可

                    let containerRight = document.querySelector('.container-right');

                    for(let blog of body) {
                        // 构造页面内容
                        // 构造整个博客 div
                        // js中 双引号和单引号没区别，js中一般用单引号
                        let blogDiv = document.createElement('div');
                        blogDiv.className = 'blog';

                        // 构造标题
                        //此处注意，我们css中 的样式针对的是 h2标题，不是div标签
                        // let titleDiv = document.createElement('div');
                        let titleDiv = document.createElement('h2');
                        //titleDiv.className = 'title';
                        titleDiv.innerHTML = blog.title;
                        blogDiv.append(titleDiv);                                                            

                        // 构造发布时间
                        let timeDiv = document.createElement('div');
                        timeDiv.className = 'date';
                        timeDiv.innerHTML = blog.postTime;
                        blogDiv.append(timeDiv);  
                        
                        //构造博客摘要
                        let contentDiv = document.createElement('div');
                        contentDiv.className = 'desc';
                        contentDiv.innerHTML = blog.content;
                        blogDiv.append(contentDiv); 
                        
                        // 构造 全文查看按钮
                        let a = document.createElement('a');
                        // 这表示文字，也就是标签中的内容部分
                        a.innerHTML = '查看全文 &gt;&gt;';
                        // 期望点击后，跳转到博客详情页,同时加上query string，告诉详情页是点了哪篇博客
                        // 此处 注意是有 加上 query string的博客id
                        a.href = 'blog_detail.html?blogId=' + blog.blogId;
                        blogDiv.appendChild(a);

                        // 整体构造的div 加入到页面上
                        containerRight.appendChild(blogDiv);
                    }
                }
            });
        }
        getBlogs();
    

        function checkLogin() {
            $.ajax({
                type: 'get',
                url: 'login',
                success: function(body) {
                    // 返回的 json 格式的字符串，此处已经被jquery 自动解析成js 对象
                    // 传过来的如果是空对象，空对象中的属性 userId 没有被设置，默认就是0，String类型的默认为 null
                    if (body.userId && body.userId > 0) {
                        // 登录成功!!
                        console.log("当前用户已经登录!!");
                        // 加上个功能, 把当前用户的名字显示到界面上. 
                        let h3 = document.querySelector('.container-left .card h3');
                        h3.innerHTML = body.username;
                    } else {
                        // 当前未登录
                        // 强制跳转到登录页. 
                        // js中 双引号和单引号没区别，js中一般用单引号
                        location.assign('login.html');
                    }
                }
            });
        }

        // 注意还需要调用
        checkLogin();

    </script> 
    <!--  注意调用是在 script 标签内进行调用的 -->
    <!-- getBlogs(); -->
    
    
</body>
</html>